$(function () {
    // 配置选项
    let $image = $('#image')

    const options = {
        // 纵横比
        aspectRatio: 1,
        // 指定预览区域
        preview: '.img-preview',
    }

    //  创建裁剪区域
    $image.cropper(options)


    // 为上传按钮绑定点击事件
    $('#btnChooseImg').on('click', function () {
        // 触发文件选择框的点击事件 弹出文件选择
        $('#file').trigger('click')
    })

    // 文件选择框 change事件
    // 触发时机：当选中的文件发生改变时 触发
    $('#file').on('change', function (e) {
        // 如果没有选中图片，则提示错误消息
        if (e.target.isDefaultNamespace.length === 0)
            return layuiAll.layer.msg('未选中文件');
        // 如果有选中的文件，则获取被选中的文件信息 伪数组 第一个文件
        let file = e.target.files[0];

        // 将文件信息转成文件的虚拟路径
        let filePathVirtual = URL.createObjectURL(file);
        // 将虚拟路径设置给裁剪组件
        $image
            .cropper('destroy')//销毁旧的裁剪区域
            .attr('src', filePathVirtual)//重新设置图片路径
            .cropper(options)//重新初始化裁剪区域
    })

    // 确定伤处按钮
    $('#btnYes').on('click', function () {
        // 获取裁剪后图片base64格式的数据字符串
        let dataURL = $image
            .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
                width: 100,
                height: 100
            })
            .toDataURL('image/png')//将Canvas画布上的内容 转化为base64格式的字符串

        // 发送异步请求 给服务器 上传图片 接口
        $.ajax({
            method: 'POST',
            url: '/my/update/avatar',
            data: { avatar: dataURL },
            success(res) {
                console.log(res);
                layui.layer.msg(res.message);
                if (res.status !== 0) return
                window.parent.getUserInfo()//调用父页面更新个人信息方法
            }
        })
    })
})

